<template>
    <Modal :mask-closable="false"
        :title="`${$t('common.chooseQrCodePrint')}`"
        width="487px"
        v-model="printVisible"
        :footer-hide="true"
        class="modal-wrap-layout">
        <Row>
            <Col :span="24">
                <section id="equipmentsprintTwo1001" >
                    <div class="bigBorder" v-for="(item,index) of record" :key="index">
                        <div class="big-item-Border">
                            <div class="cro_left_top"></div>
                            <div class="cro_right_top"></div>
                            <div class="cro_left_bottom"></div>
                            <div class="cro_right_bottom"></div>
                            <h1 class="print-big-title">
                              <img  style="padding: 0px 15px;" width="100%" src="../../../../assets/images/product/plogo.png" alt="">
                            </h1>
                            <Row class="bigRow">
                                <Col :span="14" style="padding-top:25px;">
                                  <Col :span="24">
                                    <Col :span="24" class="print-big-item">
                                      <span class="print-big-item-title">{{$t('仓库编号')}}</span>
                                      <span class="print-big-item-content">{{ item.backupName  }}</span>
                                    </Col>
                                    <Col :span="24" class="print-big-item">
                                      <span class="print-big-item-title">{{$t('库区编号')}}</span>
                                      <span class="print-big-item-content">{{ item.shelf }}</span>
                                    </Col>
                                    <Col :span="24" class="print-big-item">
                                      <span class="print-big-item-title">{{$t('库位编号')}}</span>
                                      <span class="print-big-item-content">{{ item.location}}</span>
                                    </Col>
                                  </Col>
                                </Col>
                                <Col :span="10" class="print-big-item">
                                    <Col :span="24" align="center"  class="print-qrcode">
                                        <div id="qrcodeOne" ref="qrcode"></div>
                                    </Col>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </section>
                <Row style="margin: 5px">
                    <Col align="center">
                        <Button style="margin-top:20px;" v-print="'#equipmentsprintTwo1001'" type="primary">{{$t('打印')}}</Button>
                    </Col>
                </Row>
            </Col>
        </Row>
    </Modal>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
    name: "ledgerPrintModalSpart",
    data() {
        return {
            type: '',
            printVisible: false,
            record: [],
            refList:[],
        }
    },
    methods: {
        show(record, type) {
            this.printVisible = true;
            this.type = type;
            this.record = record
            this.createQRCode()
        },

        createQRCode(text) {
            this.$nextTick(() => {
                this.record.forEach((item, index) => {
                    this.$refs.qrcode[index].innerHTML = ''; //清除二维码方法一
                    let text = item.location;
                    setTimeout(() => {
                        let qrcode = new QRCode(this.$refs.qrcode[index], {
                            text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
                            width: 145,
                            height: 145,
                            colorDark: '#000000',
                            colorLight: '#ffffff',
                            correctLevel: QRCode.CorrectLevel.H,
                        })
                        let logo = new Image();
                        logo.crossOrigin = 'Anonymous';
                        // logo.src = require("@/assets/images/icon1.png");
                        logo.onload = function() {
                            let qrImg = qrcode._el.getElementsByTagName('img')[0];
                            let canvas = qrcode._el.getElementsByTagName('canvas')[0];
                            let ctx = canvas.getContext("2d");
                            ctx.drawImage(logo,150 * 0.5 - 36, 150 * 0.5 - 17, 66, 33);
                            qrImg.src = canvas.toDataURL();
                        }
                    }, 500)
                })
            })
        }
    }
}
</script>

<style media="print">
@page {
    /* size: auto; */
    /* margin: 3mm; */
}
</style>
<style lang="scss" scoped>
.bigBorder{
    background: rgb(1,112,183) !important;
    width: 12cm;
    height: 7.98cm;
    padding: 12px;
    margin-bottom: 0.04cm;
    .big-item-Border{
        position: relative;
        border: 2px solid #fff;
        height: 100%;
        .cro_left_top,.cro_right_top,.cro_left_bottom,.cro_right_bottom{
            position: absolute;
            width: 20px;
            height: 20px;
            z-index: 999;
            background: rgb(1,112,183) !important;
        }
        .cro_left_top{
            top: -2px;
            left: -2px;
            border-radius:0px 0px 20px 0px;
            border-bottom: 2px solid #fff;
            border-right: 2px solid #fff;
        }
        .cro_right_top{
            top: -2px;
            right: -2px;
            border-radius:0px 0px 0px 20px;
            border-bottom: 2px solid #fff;
            border-left: 2px solid #fff;
        }
        .cro_left_bottom{
            left: -2px;
            bottom: -2px;
            border-radius:0px 20px 0px 0px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
        }

        .cro_right_bottom{
            right: -2px;
            bottom: -2px;
            border-radius:20px 0px 0px 0px;
            border-top: 2px solid #fff;
            border-left: 2px solid #fff;
        }
    }
    .bigRow{
        padding: 0px 15px;
    }
}
.print-big-title {
    font-size: 26px;
    font-weight: bold;
    padding: 15px 0;
    text-align: center;
    color: #fff !important;
    // letter-spacing: 6px;
}
.print-big-item {
    color: #fff !important;
    padding: 4px 0;
    //.print-qrcode{
    //  border-radius: 10px;
    //  border:#fff solid 1px;
    //}
    .print-big-item-title {
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
        width: 33%;
        color: #fff !important;
        text-align-last:justify;
    }
    .print-big-item-content {
        font-size: 14px;
        display: inline-block;
        font-weight: 600;
        margin-left: 3%;
        width: 60%;
        text-align: center;
        color: #fff !important;
        border: 1px solid #fff;
        line-height: 30px;
    }
    .print-big-item-title1{
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        width: 65%;
        color: #fff !important;
        text-align-last:justify;
    }
    .print-big-item-content1{
        font-size: 14px;
        display: inline-block;
        font-weight: 500;
        text-align: center;
        margin-left: 2%;
        width: 33%;
        color: #fff !important;
        border: 1px solid #fff;
    }
}
.print-big-item1 {
    color: #fff !important;
    padding: 12px 0;
    .print-qrcode{
        padding-top: 10px;
    }
    .print-big-item-title {
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
        width: 33%;
        color: #fff !important;
        text-align-last:justify;
    }
    .print-big-item-content {
        font-size: 14px;
        display: inline-block;
        font-weight: 600;
        margin-left: 3%;
        width: 60%;
        text-align: center;
        color: #fff !important;
        border: 1px solid #fff;
        
    }
}
#qrcodeOne{
  width: 145px;
  height: 145px;
  /deep/ img{  border: #fff solid 6px;
    border-radius: 0px;
  }
}
</style>
